<template>
  <z-publicFrame>
    <template #header>
      <el-page-header @back="goBack" content="修改">
      </el-page-header>
    </template>
    <template #container>
      <div class="formStyle">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
          <ZFormEdit v-for="(item, index) in formView" :key="index" :img="img" :form="item" v-model="form[item.model]"></ZFormEdit>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">立即修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../../components/CrudTempalte/PublicFrame'
import { formView, api, img, withFile } from './config'

function init() {
  const form = { code: '' }
  const rules = { }
  for (let i = 0; i < formView.length; i++) {
    let formViewElement = formView[i]
    let initValue = formViewElement.initValue
    let rule = formViewElement.rule
    let model = formViewElement.model
    if (initValue) {
      initValue = formViewElement.initValue
    } else {
      initValue = ''
    }
    form[model] = initValue
    //  rule
    if (rule.message) {
      rules[model] = [
        {
          required: true,
          message: rule.message,
          trigger: 'blur'
        }
      ]
    }
  }
  return { form, rules }
}
const { form, rules } = init()
export default {
  name: 'add',
  components: {
    'z-publicFrame': PublicFrame
  },
  data() {
    return {
      api: {
        update: this.$api[api].update,
        detail: this.$api[api].detail
      },
      img: null,
      formView,
      form,
      rules
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleUpdate() {
      if (withFile) {
        this.handleUpdateWithFile()
        return
      }
      const temp = {}
      for (let item in this.form) {
        if (this.form[item]) {
          temp[item] = this.form[item]
        }
      }
      this.$httpTemplate({ url: this.api.update, paras:temp }, e => {
        this.goBack()
      })
    },
    handleUpdateWithFile() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        const formData = new FormData()
        for (let key in this.form) {
          if (this.form[key]) {
            formData.append(key, this.form[key])
          }
        }
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$http.post(this.api.update, formData, config).then(data => {
          if (data.data.status === 200) {
            this.$success(data.data.message)
          }
          this.goBack()
        })
      })
    },
    handleDetail(code) {
      this.$httpTemplate({ url: this.api.detail, paras: { code: code } }, data => {
        for (let item in data.data.data) {
          if (data.data.data[item].code) {
            this.$beanUtils.copyProperties(data.data.data[item], this.form)
            this.handleImg(data.data.data[item])
          }
        }
      })
    },
    handleImg(item) {
      if (img.model) {
        this.img = `/download?code=${item[img.model]}`
      }
    }
  },
  created() {
    if (!formView.length) {
      this.$error('没有修改功能')
      this.goBack()
      return
    }
    const code = this.$route.query.code
    this.handleDetail(code)
  }
}
</script>

<style scoped>
  .el-page-header {
    margin: 15px 0;
    overflow: hidden;
  }
  div.formStyle {
    margin-top: 30px;
    width: 600px;

  }

</style>
